<script lang='ts'>
export default {
    mounted() {
        // 初始化自适应  ----在刚显示的时候就开始适配一次
        this.handleScreenAuto();
        // 绑定自适应函数   ---防止浏览器栏变化后不再适配
        window.onresize = () => this.handleScreenAuto();
    },
    deleted() {
        window.onresize = null;
    },
    methods: {
        // 数据大屏自适应函数
        handleScreenAuto() {
            const designDraftWidth = 1920; //设计稿的宽度
            const designDraftHeight = 1080; //设计稿的高度
            // 根据屏幕的变化适配的比例
            const scale =
                document.documentElement.clientWidth /
                    document.documentElement.clientHeight <
                    designDraftWidth / designDraftHeight
                    ? document.documentElement.clientWidth / designDraftWidth
                    : document.documentElement.clientHeight / designDraftHeight;
            // 缩放比例
            (document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%, -50%)`;
        },
    },
};
</script>
 
<template>
    <div className="screen-wrapper">
        <div className="screen" id="screen">

        </div>
    </div>
</template>
 
<style scoped lang="scss">
.screen-wrapper {
    height: 100%;
    width: 100%;

    .screen {
        display: inline-block;
        width: 1920px;
        height: 1080px;
        transform-origin: 0 0;
        background-color: rgb(202, 247, 130);
        position: absolute;
        left: 50%;
        top: 50%;
    }
}
</style>